import style from './index.less';
('@ant-design/icons');
import React, { useState } from 'react';
import request from '@/http';
import {
  DatePicker,
  Space,
  Input,
  Select,
  Table,
  Tag,
  Tabs,
  Button,
  Form,
} from 'antd';
import All_style from '../../index.less';

const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
const { Option } = Select;
const columns = [
  {
    title: '日期',
    dataIndex: 'courseCreateTime',
    key: 'courseCreateTime',
  },
  {
    title: '项目名称',
    dataIndex: 'courseName',
    key: 'courseName',
  },
  {
    title: '实训老师',
    dataIndex: 'sxteacher',
    key: 'sxteacher',
    render: (text, row) => {
      return (
        <>
          {row?.sxteacher?.map((item: any, index: number) => {
            return (
              <span key={index}>
                {item.sxteacherName}
                <br />{' '}
              </span>
            );
          })}
        </>
      );
    },
  },
  {
    title: '责任老师',
    dataIndex: 'zrteacher',
    key: 'zrteacher',
  },
  {
    title: '签到时间',
    dataIndex: 'courseInttime',
    key: 'courseInttime',
  },
  {
    title: '签退时间',
    dataIndex: 'courseOuttime',
    key: 'courseOuttime',
  },
  {
    title: '教室',
    dataIndex: 'courseClassroom',
    key: 'courseClassroom',
  },
  {
    title: '备注',
    dataIndex: 'courseNote',
    key: 'courseNote',
  },
];
const dataOld = [
  {
    key: '1',
    courseClassroom: '402',
    courseCreateTime: '2021-06-06T05:03:03.000+00:00',
    courseId: 1,
    courseInttime: '2021-06-10 13:02:40',
    courseName: '学生实训管理系统',
    courseNote: '',
    courseOuttime: '2021-07-01 13:02:46',
    sxteacher: [
      {
        sxteacherID: '',
        sxteacherName: '',
      },
    ],
    zrteacher: '陈',
  },
];
const Course = (props: any) => {
  const [data, setData] = React.useState(dataOld);
  const [formObject] = Form.useForm(); //获取表单数据

  const [captchaUrl, setCaptchaUrl] = React.useState('');
  //项目名称下拉框绑定接口
  const [CourseName, setCourseName] = React.useState([]);
  const getCourseName = async () => {
    const CourseName1: any = await request.put(
      '/user_info_manage/getCourseName',
    );
    setCourseName(CourseName1.data);
    console.log(CourseName1.data);
  };
  // 实训老师下拉框接口绑定
  const [trTeacherName, setTrTeacherName] = React.useState([]);
  const getTrTeacherName = async () => {
    const TrTeacherName: any = await request.post('/Course/Query/SXteacher');
    setTrTeacherName(TrTeacherName.data);
  };
  // 责任老师下拉框接口绑定
  const [reTeacherName, setReTeacherName] = React.useState([]);
  const getReTeacherName = async () => {
    const ReTeacherName: any = await request.post('/Course/Query/ZRteacher');
    setReTeacherName(ReTeacherName.data);
  };
  interface pay {
    current: number;
    pageSize: number;
    total: number;
    onChange: any;
  }
  const onCurrentChange = (page, pageSize) => {
    loadData(page, pageInfo.pageSize);
  };
  const [pageInfo, setPageInfo] = useState<pay>({
    current: 1,
    pageSize: 5,
    total: 0,
    onChange: onCurrentChange,
  });

  /**
   *
   * @param current
   * @param pageSize
   */
  const loadData = async (current, pageSize) => {
    const datas = await formObject.validateFields();
    const result: any = await request.post('/Course/Query/CourseAll', {
      page: current,
      number: pageSize,
      ...datas,
      CourseCreateTime2: datas?.vacationSubmitDate
        ? datas?.vacationSubmitDate[1]?.format('YYYY-MM-DD HH:mm:ss')
        : '',
      CourseCreateTime1: datas?.vacationSubmitDate
        ? datas?.vacationSubmitDate[0]?.format('YYYY-MM-DD HH:mm:ss')
        : '',
      zrteacherID: datas.zrteacherID,
    });
    console.log(result.data);
    if (result.success) {
      setData(result.data.returnDate);
      setPageInfo({
        current: result?.data?.paginationData?.currentPage,
        pageSize: result?.data?.paginationData?.number,
        total: result?.data?.paginationData?.sum,
        onChange: pageInfo.onChange,
      });
    }
  };
  //重置按钮
  const onReset = () => {
    formObject.resetFields();
    loadData(pageInfo.current, pageInfo.pageSize);
  };
  React.useEffect(() => {
    loadData(pageInfo.current, pageInfo.pageSize);
    getCourseName();
    getTrTeacherName();
    getReTeacherName();
  }, []);

  return (
    <div className={All_style.box}>
      <Form name="SelectLeaveForm" form={formObject} preserve={false}>
        <div style={{ clear: 'both' }}>
          <Form.Item
            name="vacationSubmitDate"
            label="日期："
            style={{ float: 'left' }}
            className={All_style.data}
          >
            <RangePicker showTime className={All_style.select} />
          </Form.Item>

          <Form.Item
            name="courseName"
            label="项目名称："
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select defaultValue="请选择" className={All_style.select}>
              {CourseName.map((c: any, index) => {
                return (
                  <Option key={`k_${index}`} value={c}>
                    {c}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>

          <Form.Item
            name="sxteacherID"
            label="实训老师："
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select defaultValue="请选择" className={All_style.select}>
              {trTeacherName.map((c: any, index) => {
                return (
                  <Option key={`k_${index}`} value={c.sxteacherID}>
                    {c.sxteacherName}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
        </div>

        <div style={{ clear: 'both' }}>
          <Form.Item
            name="zrteacherID"
            label="责任老师："
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select defaultValue="请选择" className={All_style.select}>
              {reTeacherName.map((c: any, index) => {
                return (
                  <Option key={`k_${index}`} value={c.zrteacherID}>
                    {c.zrteacherName}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>

          <Button
            className={All_style.button}
            onClick={() => loadData(pageInfo.current, pageInfo.pageSize)}
          >
            查询
          </Button>
          <Button className={All_style.button2} onClick={onReset}>
            重置
          </Button>
        </div>
      </Form>

      <Table
        columns={columns}
        dataSource={data}
        className={All_style.table}
        pagination={pageInfo}
      />
    </div>
  );
};
export default Course;
